<template>
    <div class="m-searchbar">
        <el-row>
            <el-col :span="5">
                <h1 class="mt-logo">
                    <a href="/">
                        <img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" alt="美团">
                    </a>
                </h1>
            </el-col>
            <el-col :span="19" class="pd20">
                <div class="mt-search-info">
                    <el-input v-model="search" placeholder="搜索商家或地点" @focus="showResult" @blur="hideBlur" @input="inputKeyWord"></el-input>
                    <el-button type="primary" @click="searchEnter">
                        <i class="header-icon icon-search"></i>
                    </el-button>
                    <div class="mt-search-suggest" v-show="isFocus">
                        <div class="search-focus" v-show="isHotSearch">
                            <!--<div class="search-history">
                                <div class="h-info">
                                    <h4>最近搜索</h4>
                                    <a href="javascript:;">删除搜索历史</a>
                                </div>
                                <div class="history-list">
                                    <a href="/">烧烤美食</a>
                                    <a href="/">烧烤美食</a>
                                    <a href="/">烧烤美食</a>
                                    <a href="/">烧烤美食</a>
                                </div>
                            </div>-->
                            <div class="focus-list">
                                <h4>热门搜索</h4>
                                <a href="/" v-for="(item,index) in inputHotSearch" :key="index">{{item.word}}</a>   
                            </div>
                        </div>
                        <div class="search-hot" v-show="isSearchResult">
                            <a :href="'/products?keyword='+word.editorWord" v-if="columnShow" v-for="(word,index) in suggest" :key="index">{{word.editorWord}}</a>
                        </div>
                    </div>
                </div>
                <div class="hot-search">
                    <a href="/" v-for="(item,index) in headHotSearch" :key="index">{{item.word}}</a>
                </div>
                <div class="mt-nav">
                    <a href="http://waimai.meituan.com" target="_blank" class="sellout">美团外卖</a>
                    <a href="//maoyan.com" target="_blank" class="movie">猫眼电影</a>
                    <a href="//hotel.meituan.com" target="_blank" class="hotel">美团酒店</a>
                    <a href="//phoenix.meituan.com/?phx_wake_up_type=mtpc_category&phx_wake_up_source=nav_bar" target="_blank" class="apartment">民宿 / 公寓</a>
                    <a href="//emis.meishi.meituan.com/merchantsSettled" target="_blank" class="merchants">商家入驻</a>
                    <a href="//gongyi.meituan.com/" target="_blank" class="welfare">美团公益</a>
                </div>
            </el-col>
        </el-row>    
    </div>
</template>

<script>
import lodash from 'lodash'

export default{
    data(){
        return{
            search: '',
            suggest: [],
            isFocus: false,
            inputHotSearch: [],
            headHotSearch: []
        }
    },
    computed:{
        isHotSearch(){
            return this.isFocus && !this.search;
        },
        isSearchResult(){
            return this.isFocus && this.search;
        },
        columnShow(){
            return this.suggest.length && this.search;
        }
    },
    async created(){
        let {status,data} = await this.$axios.get('http://127.0.0.1:8082/search/hotSearchList');
        this.inputHotSearch = data.data.slice(0,4);
        this.headHotSearch = data.data.slice(0,6);
    },
    methods:{
        showResult(){
            this.isFocus = true;
        },
        hideBlur(){
            setTimeout(() => {
                this.isFocus = false;
            } , 500)
        },
        inputKeyWord: lodash.debounce(async function(){
            let self = this;
            if(this.search == ''){
                return
            }
            let {status,data:{code , result}} = await self.$axios.get('http://127.0.0.1:8082/search/suggest' , {
                params:{
                    keyword: this.search
                }
            });
            if(status === 200 && code === 0){
                this.suggest = result.data.suggestItems;
            }
        },300),
        async searchEnter(){
            let count = 0;
            if(this.search == ''){
                return
            }
            count++;
            let res = await this.$axios.get('http://127.0.0.1:8082/search/hotword' , {
                params:{
                    word: this.search,
                    sort: count
                }    
            })
        }
    }
}
</script>